<template>
  <div class="worker-add-view flex-column" v-loading="loading">
    <div class="flex-row-between">
      <div class="width-50 flex-column">
        选择
        <el-card class="" shadow="never">
          <el-input placeholder="搜索员工">
            <template #prefix>
              <Icon icon="search"></Icon>
            </template>
          </el-input>
          <div style="margin: 5px 0">
            <el-button-group>
              <el-button @click="qr = false">组织架构</el-button>
              <el-button type="primary" @click="qr = true">二维码邀请</el-button>
            </el-button-group>
          </div>
          <div v-show="qr" class="text-center">
            <div class="qr">
              <QrCode text="http://localhost:3001/#/ProjectManage"></QrCode>
              <div class="text text-large">xx公司</div>
              <div class="text">xx项目</div>
            </div>
            <div><el-button type="primary">下载二维码</el-button></div>
          </div>
          <div v-show="!qr">
            <el-tree :data="data" :props="props" default-expand-all show-checkbox :expand-on-click-node="false" :height="208"></el-tree>
          </div>
        </el-card>
      </div>
      <div class="width-50 flex-column">
        已选
        <el-card shadow="never"></el-card>
      </div>
    </div>

    <div class="dialog-action text-right">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">确认</el-button>
    </div>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
export default {
  extends: BaseComponent,
  name: "DesignWorker",
  props: ["design"],
  emits: ["close"],
  data() {
    return {
      qr: false,
      props: {
        value: "value",
        label: "name",
        children: "children"
      },
      options: [
        { label: "张三", value: "张三" },
        { label: "张三1", value: "张三1" },
        { label: "张三2", value: "张三2" },
        { label: "张三3", value: "张三3" }
      ],
      loading: false,
      form: this.design || {},
      rules: [],
      g: [
        {
          name: "数字员工",
          children: [
            { name: "数字状态", children: [] },
            { name: "工作记录", children: [] }
          ]
        }
      ]
    };
  },
  computed: {
    data() {
      return [
        {
          name: "部门1",
          value: "部门1",
          children: [{ name: "员工1", value: "员工1" }]
        },
        {
          name: "部门2",
          value: "部门2",
          children: [{ name: "员工1", value: "员工1" }]
        }
      ];
    },
    checkAll() {
      return 0;
    },
    groups() {
      return [
        {
          name: "数字员工",
          children: [
            { name: "数字状态", children: [] },
            { name: "工作记录", children: [] }
          ]
        }
      ];
    }
  },
  created() {
    // this.getData();
  },

  methods: {
    isIndeterminate() {},
    handleCheckAllChange() {},
    cancel() {
      this.$emit(`close`);
    },
    save() {
      this.loading = true;
      this.$g.ajax.$api("member.save", this.form).then((result) => {
        console.log(result);
        this.loading = false;
        this.$g.toast(result.message, result.code == 0 ? "success" : "error");
        this.cancel();
      });
    }
  }
};
</script>
<style>
.qr {
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 20px;
  margin: 20px 0;
}
.qr .qr-code {
  width: 160px;
  height: 160px;
  margin-bottom: 10px;
}
.qr .text {
  padding: 5px;
}
.text-large {
  font-size: 1.4em;
}
.worker-add-view {
  overflow: auto;
}
.worker-add-view .el-tree {
}
.worker-add-view .width-50 {
  height: 500px;
  width: 49%;
}

.worker-add-view .el-card {
  background-color: rgb(246, 246, 246);
  padding: 10px;
  flex-grow: 1;
}
.dialog-action {
  margin-top: 20px;
}
</style>
